<!DOCTYPE html>
<html>
<head>
    <title>Order Appointments</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.9/css/layui.min.css">

</head>
<body>
<div id="date-chart" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.staticfile.org/layui/2.6.9/layui.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.min.js"></script>

<script>
    // 订单预约时间（示例数据）
    var orderAppointments = [
        { date: '2023-06-26', time: 'morning' },
        { date: '2023-06-27', time: 'afternoon' },
        { date: '2023-06-28', time: 'evening' },
        // 添加更多的订单预约时间...
    ];

    // 获取当前日期
    var currentDate = new Date();

    // 获取本周的起始日期和结束日期
    var startDate = new Date(currentDate);
    startDate.setDate(currentDate.getDate() - currentDate.getDay());

    var endDate = new Date(startDate);
    endDate.setDate(startDate.getDate() + 6);

    // 创建日期列表
    var dateList = [];
    for (var date = new Date(startDate); date <= endDate; date.setDate(date.getDate() + 1)) {
        dateList.push(formatDate(date));
    }

    // 创建时间列表
    var timeList = ['Morning', 'Afternoon', 'Evening'];

    // 创建日期图配置
    var option = {
        tooltip: {
            position: 'top'
        },
        grid: {
            height: '50%',
            top: '10%'
        },
        xAxis: {
            type: 'category',
            data: dateList,
            boundaryGap: false,
            splitLine: {
                show: true
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: timeList,
            axisTick: {
                show: false
            }
        },
        series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 20,
            data: [],
            itemStyle: {
                color: '#FF5722'
            }
        }]
    };

    // 标记订单预约时间
    for (var i = 0; i < orderAppointments.length; i++) {
        var appointment = orderAppointments[i];
        var appointmentDate = appointment.date;
        var appointmentTime = appointment.time;

        var dataIndex = dateList.indexOf(appointmentDate);
        var timeIndex = timeList.indexOf(appointmentTime);

        if (dataIndex !== -1 && timeIndex !== -1) {
            option.series[0].data.push([dataIndex, timeIndex]);
        }
    }

    // 使用Layui绘制ECharts图表
    layui.use('layui', function () {
        layui.use('echarts', function () {
            var echarts = layui.echarts;

            var dateChart = echarts.init(document.getElementById('date-chart'));
            dateChart.setOption(option);

            // 添加订单预约时间标记
            var canvas = dateChart.getZr().dom;
            var ctx = canvas.getContext('2d');
            var pixelRatio = window.devicePixelRatio || 1;

            ctx.font = '12px Arial';
            ctx.fillStyle = '#FFFFFF';
            ctx.textAlign = 'center';

            for (var i = 0; i < option.series[0].data.length; i++) {
                var data = option.series[0].data[i];
                var dataIndex = data[0];
                var timeIndex = data[1];
                var x = dateChart.convertToPixel('grid', dataIndex);
                var y = dateChart.convertToPixel('grid', timeIndex);

                ctx.fillText('✓', x * pixelRatio, y * pixelRatio);
            }

            window.addEventListener('resize', function () {
                dateChart.resize();
            });
        });
    });

    // 格式化日期为YYYY-MM-DD
    function formatDate(date) {
        var year = date.getFullYear();
        var month = (date.getMonth() + 1).toString().padStart(2, "0");
        var day = date.getDate().toString().padStart(2, "0");
        return year + "-" + month + "-" + day;
    }
</script>
</body>
</html>
